<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('模型1')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
	
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>系统参数配置</h5>
                    </div>
                    <div class="ibox-content">
                    	<div style="height: 200px;">
                    		<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
                    	</div>
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>历史数据</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height: 200px;">
                    		<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>导入Excel</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height: 500px;">
							<div class="row">
								<div class="container-div">
							        <div class="btn-group-sm" id="toolbar" role="group">
								        <a class="btn btn-success" onclick="importExcelModal()">
								            <i class="fa fa-check"></i> 导入数据
								        </a>
								         <a class="btn btn-danger" onclick="$.table.showColumn('userName')">
								            <i class="fa fa-check"></i> 开始执行
								        </a>
							        </div>
									<div class="row">
										<div class="col-sm-12 select-table table-striped">
											<table id="bootstrap-table"></table>
										</div>
									</div>
								</div>
							</div>
							
                    		
                    	</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>实时数据</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height: 500px;">
                    		<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
        
    
        
    </div>
    <!-- 上传文件窗口开始 -->
    <div class="modal fade" id="importExcelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">导入</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group"  style="margin: 10px;">
                            <div class="file-loading">
                                <input id="importExcelInput" name="file" type="file" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 上传文件窗口结束 -->
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    
    <script type="text/javascript">
	    $(function(){
	    	var prefix = ctx + "multab/multabapi/multab1";
	    	//定义数据表格
	    	$("#bootstrap-table").bootstrapTable({
	    		striped: true,
	    		pagination: true,
	    		sidePagination: "client",
	    		pageNumber:1,
	            pageSize: 10,
	            pageList: [10, 20,30,50],
	            height: 460,
    	        columns: [
   	        	{  
   	        	    title: '序号',  
   	        	    field: '',  
   	        	    formatter: function (value, row, index) {  
   	        	        return index+1;  
   	        	    }  
   	        	}, 
				{
					field : 'param1', 
					title : '参数1'
				},
				{
					field : 'param2', 
					title : '参数2'
				},
				{
					field : 'param3', 
					title : '参数3'
				},
				{
					field : 'param4', 
					title : '参数4'
				},
				{
					field : 'param5', 
					title : '参数5'
				},
				{
					field : 'param6', 
					title : '参数6'
				},
				{
					field : 'param7', 
					title : '参数7'
				},
				{
					field : 'param8', 
					title : '参数8'
				},
				{
					field : 'param9', 
					title : '参数9'
				},
				{
					field : 'param10', 
					title : '参数10'
				},
				{
					field : 'param11', 
					title : '参数11'
				},
				{
					field : 'param12', 
					title : '参数12'
				}]
    	    });
	    	// 导入数据
	        $("#importExcelInput").fileinput({
	            'uploadUrl': prefix + '/upload',
	            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
	            validateInitialCount: true,//开启校验文件数量限制
	            maxFileCount: 1,//允许最多上传文件数量
	            dropZoneEnabled: false,//是否显示拖拽区域
	            maxFileSize: 1024,//单位为kb，如果为0表示不限制文件大小
	            'theme': 'fas',
	            'language': 'zh',
	            overwriteInitial: false,
	            initialPreviewAsData: true,
	            allowedFileExtensions: ['xlsx', 'xls']
	        }).on("fileuploaded", function (event, data, previewId, index) {
	            // alert(data.response.code == 'N00000');
	            if (data.response.code == '0'){
	                //
	                $('#bootstrap-table').bootstrapTable('removeAll');
	                // var list = JSON.parse(returnData.child);
	                var list =  data.response.data;
	                
	                $("#bootstrap-table").bootstrapTable('load',list);
	               
	                //清空上传的文件
	                $("#importExcelInput").fileinput('clear').fileinput('enable');
	                //关闭模态框
	                $('#importExcelModal').modal('hide')
	            }else {
	                layer.msg(data.response.msg)
	                //清空上传的文件
	                $("#importExcelInput").fileinput('clear').fileinput('enable');
	            }
	        });
	        
	    });
	    function importExcelModal(){
	    	$('#importExcelModal').modal('show');
	    }
    </script>
</body>

</html>
